<template>
	<m-layout gap="0 24 24" title="商家入驻" :isLoading="loading">
		<m-block spa="400 0 30" gap="30">
			<!-- 不是 店铺 -->
			<m-block class="flex-1" v-if="!applyInfo.id || reSet">
				<m-block spa="0 0 10">
					<h5 class="flex-between">
						<text>店铺名称<em class="text-red">*</em></text>

					</h5>
					<m-block bgColor="#F6F6F6" radius="20" gap="20" spa="20 0">
						<input type="text" class="fs26" placeholder="请输入店铺名称" v-model="applyInfo.shopname">
					</m-block>
				</m-block>
				<m-block spa="0 0 10">
					<h5>店铺描述<em class="text-red">*</em></h5>
					<m-block bgColor="#F6F6F6" radius="20" gap="20" spa="20 0">
						<textarea style="height: 100rpx;" class="fs26" v-model="applyInfo.content"
							placeholder-class="placeholder" placeholder="请详细描述您请输入店铺描述" />
					</m-block>
				</m-block>
				<m-block spa="0 0 10">
					<h5>店铺LOGO<em class="text-red">*</em></h5>
					<m-block bgColor="#F6F6F6" radius="20" gap="20" spa="20 0">
						<view v-if="!picurl.length" class="flex" @click="addPhoto(1)">
							<m-icon size="48" color="#999999" type="icon-xiangji"></m-icon>
							<text class="fs21 ml-12">添加照片</text>
						</view>
						<view  v-else class="image-box" @click="itemClick(1)">
							<image class="img-sy" :src="picurl[0]" ></image>
							<m-icon size="48" color="#999999" type="icon-shanchu1" />
						</view>
						<!-- <uploadPhoto v-model="picurl" placeholder='添加照片' length=1 @setImg="setImg"></uploadPhoto> -->
					</m-block>
				</m-block>
				<m-block spa="0 0 10">
					<h5>营业执照<em style="color: red;">*</em></h5>
					<m-block bgColor="#F6F6F6" radius="20" gap="20" spa="20 0">
						<view v-if="!license.length" class="flex" @click="addPhoto(2)">
							<m-icon size="48" color="#999999" type="icon-xiangji"></m-icon>
							<text class="fs21 ml-12">添加照片</text>
						</view>
						<view  v-else class="image-box" @click="itemClick(2)">
							<image class="img-sy" :src="license[0]" ></image>
							<m-icon size="48" color="#999999" type="icon-shanchu1" />
						</view>
						<!-- <uploadPhoto v-model="license" placeholder='添加照片' length=1></uploadPhoto> -->
					</m-block>
				</m-block>
				<m-block spa="0 0 10">
					<h5>门头照<em class="text-red">*</em></h5>
					<m-block bgColor="#F6F6F6" radius="20" gap="20" spa="20 0">
						<!-- <uploadPhoto v-model="doorpicurl" placeholder='添加照片' length=1>
						</uploadPhoto> -->
						<view v-if="!doorpicurl.length" class="flex" @click="addPhoto(3)">
							<m-icon size="48" color="#999999" type="icon-xiangji"></m-icon>
							<text class="fs21 ml-12">添加照片</text>
						</view>
						<view  v-else class="image-box" @click="itemClick(3)">
							<image class="img-sy" :src="doorpicurl[0]" ></image>
							<m-icon size="48" color="#999999" type="icon-shanchu1" />
						</view>
					</m-block>
				</m-block>
				<m-block spa="0 0 10">
					<h5 class="flex-between">
						<text>初始密码<em class="text-red">*</em></text>
						<text class="fs21 text-grey">该密码将作为商家端登录密码</text>
					</h5>
					<m-block bgColor="#F6F6F6" radius="20" gap="20" spa="20 0">
						<input type="text" class="fs26" placeholder="请设置初始密码" v-model="applyInfo.password">
					</m-block>
				</m-block>
				<m-block>
					<!-- <text class="fs26">入驻说明</text> -->
					<view class="fs21 flex-column text-red">
						<text>1、入驻线上商家需先完成实名认证</text>
						<text>2、当前账号需完成手机号绑定（当前账号绑定的手机号将作为商家端登录账号）</text>
					</view>
				</m-block>
				<m-block bgColor="unset">
					<m-button class="mt-24 btnBg" color="#E62626" :loading="btnLoading"
						@click="ApplyShop()">提交申请</m-button>
				</m-block>
			</m-block>
			<!-- 已申请店铺  待审核中 -->
			<m-block v-if="applyInfo.id && !applyInfo.state" gap="200 30">
				<m-block class="flex-column ai-center" gap="200 30">
					<m-icon size="120" type="approve"></m-icon>
					<text class="fs36 mt-36 mb-8"> 系统审核中</text>
				</m-block>
			</m-block>
			<!-- 已申请店铺  已通过 -->
			<m-block v-if="applyInfo.id && applyInfo.state==1">
				<m-block class="flex-column ai-center" gap="160 30">
					<m-icon size="160" type="success"></m-icon>
					<text class="fs36 mt-36 mb-8">恭喜您入驻成功</text>
					<m-block gap="30 0">
						<m-block class="flex-between" bgColor="#f1faf2" gap="24" spa="20 10" radius="24">
							<view class="flex flex-1 mr-24">
								<text class="fs26 ws-nowrap">登录地址：</text>
								<text class="fs32 pr-8">{{stringLength(shopHttp)}}</text>
							</view>
							<m-copy :str='shopHttp' />
						</m-block>
						<m-block class="flex-between" bgColor="#f1faf2" gap="24" spa="20 10" radius="24">
							<view class="flex-1 flex mr-24">
								<text class="fs26">登录账号：</text>
								<text>{{userinfo.phone}}</text>
							</view>
							<m-copy :str='userinfo.phone' />
						</m-block>
						<m-block class="fs21 flex-column text-red" gap="24" spa="20 10">
							<text>1、商家请使用以上 登录地址 进行登录</text>
							<text>2、登录密码为申请时候设置的初始化密码，如若忘记则联系客服进行密码重置</text>
						</m-block>
					</m-block>
				</m-block>
			</m-block>
			<!-- 已申请店铺 未通过 -->
			<m-block v-if="applyInfo.id && applyInfo.state==2 && !reSet">
				<m-block class="flex-column ai-center" gap="200 30">
					<m-icon size="120" type="fail"></m-icon>
					<text class="fs36 mt-36 mb-8"> 店铺申请失败</text>
					<text style="color:red;"> {{applyInfo.backcontent}}</text>
				</m-block>
				<m-block bgColor="unset">
					<m-button class="mt-24 btnBg" color="#E62626" @click="reSet=true">再次提交</m-button>
				</m-block>
			</m-block>
		</m-block>
	</m-layout>
</template>

<script>
	import { mapState, mapActions } from 'vuex';
	import { ApplyShop, Shopinfo } from "@/api/Goods.js"
	import { Upload } from '@/api/Ctrls.js'
	export default {
		name: 'applyShop',
		data() {
			return {
				loading: false,
				reSet: false,
				picurl: [],
				license: [],
				doorpicurl: [],
				applyInfo: {
					id: 0,
					shopname: "",
					picurl: "",
					content: "",
					license: "",
					doorpicurl: "",
					password: '',
					shoptype: 1,
				},
				btnLoading: false,
				scrollTop: 0,
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				userbalance: state => state.user.userbalance
			}),
			shopHttp() {
				return this.getConfig(555) || 'https://image.baidu.com/45454545'
			},

		},
		watch: {

		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
		},
		async onShow() {
			this.loading = true;
			await this.init();
			this.loading = false;
		},
		methods: {
			itemClick(type) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除这张图片？',
					success: (res) => {
						if (res.confirm) {
							if(type==1) return that.picurl=[];
							if(type==2) return that.license=[];
							if(type==3) return that.doorpicurl=[];
						} else if (res.cancel) {
							console.log('点击了取消')
						}
					}
				});
			},
			async addPhoto(type) {
				const { tempFilePaths } = await this.chooseImage();
				uni.showLoading();
				const { success, data } = await Upload(tempFilePaths[0]);
				console.log('success, data===', success, data)
				if (success) {
					uni.hideLoading()
					if(type==1) return this.picurl.push(data);
					if(type==2) return this.license.push(data);
					if(type==3) return this.doorpicurl.push(data);
				}
			},
			setImg(e) {
				console.log('e===>', e)
			},
			//  state == 1  通过  state==2 驳回 
			// 初始 数据
			async init() {
				this.reSet = false;
				const { success, data, msg, code } = await Shopinfo()
				if (data.shopname) {
					this.applyInfo = data;
				}
			},
			async ApplyShop() {
				this.btnLoading = true;
				this.applyInfo.picurl = this.picurl[0];
				this.applyInfo.license = this.license[0];
				this.applyInfo.doorpicurl = this.doorpicurl[0];
				if (!this.applyInfo.shopname ||
					!this.applyInfo.picurl ||
					!this.applyInfo.content ||
					!this.applyInfo.license ||
					!this.applyInfo.doorpicurl) {
					this.btnLoading = false;
					this.Toast('请完善资料后再提交');
					return
				}
				console.log('this.applyInfo===>', this.applyInfo)
				const { success, msg, code } = await ApplyShop(this.applyInfo);
				this.Toast(msg)
				if (success) {
					this.init()
				}
				this.btnLoading = false;
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background: url('../../../static/images/pages/home/apply_shop_top.png') no-repeat;
		background-position: 0rpx 88rpx;
		background-size: 100% 648rpx;
		background-color: #18C03B;
	}

	.btnBg {
		border: none;
		background: url('../../../static/images/pages/home/btn_bg01.png') no-repeat;
		height: 120rpx;
		line-height: 120rpx;
		background-size: 100% 100%;
		font-weight: bold;
		font-size: 32rpx;

	}
	.image-box {
		position: relative;
		height: 194rpx;
	
		.img-sy {
			display: block;
			position: relative;
			float: left;
			width: 100%;
			height: 100%;
			border-radius: 24rpx;
		}
	
		.mIcon {
			position: absolute;
			top: -20rpx;
			right: -20rpx;
		}
	}
</style>